<template>
  <div class="fields-layout">
    <div v-if="!stepFields.length" class="fields-layout__empty">
      {{ $t('configLazyLoad.businessConfig.stepTips3') }}
    </div>
    <div class="fields-layout__mask"></div>
    <el-row :gutter="20" v-for="(item, index) in stepFields">
      <el-col v-for="col in item.cols" :span="24 / item.cols.length">
        <div v-for="one in col.fields" :key="one._id">
          <b-input
            v-if="one.type === 'single'"
            :label="one.name"
            :placeholder="one.prompt"
            :default="one.default"
            :id="one._id"
          ></b-input>
          <b-number
            v-if="one.type === 'number'"
            :label="one.name"
            :placeholder="one.prompt"
            :default="one.default"
            :id="one._id"
          ></b-number>
          <b-textarea
            v-if="one.type === 'multi'"
            :label="one.name"
            :placeholder="one.prompt"
            :default="one.default"
            :id="one._id"
          ></b-textarea>
          <b-radio
            v-if="one.type === 'radio'"
            :label="one.name"
            :dic="one.dic"
            :default="one.default"
            :id="one._id"
            :field="one"
          ></b-radio>
          <b-checkbox
            v-if="one.type === 'checkbox'"
            :label="one.name"
            :dic="one.dic"
            :default="one.default"
            :id="one._id"
            :field="one"
          ></b-checkbox>
          <b-datatime
            v-if="one.type === 'date' || one.type === 'datetime'"
            :label="one.name"
            :default="one.default"
            :placeholder="one.prompt"
            :id="one._id"
            :type="one.type"
          ></b-datatime>
          <b-time
            v-if="one.type === 'time'"
            :placeholder="one.prompt"
            :label="one.name"
            :default="one.default"
            :id="one._id"
          ></b-time>
          <b-select
            v-if="one.type === 'dropdown'"
            :label="one.name"
            :dic="one.dic"
            :default="one.default"
            :placeholder="one.prompt"
            :id="one._id"
            :field="one"
          ></b-select>
          <b-tree
            v-if="one.type === 'dropdownTree'"
            :label="one.name"
            :placeholderNew="one.prompt"
            :dic="one.dic"
            :default="one.default"
            :id="one._id"
            :field="one"
          ></b-tree>
          <b-file v-if="one.type === 'file'" :label="one.name" :default="[]" :id="one._id"></b-file>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getObjectById } from '@/utils/workflowUtils'
import { deepClone } from '@/utils/m7Utils'
import BInput from '@/components/public-modules/cust-tab-content/business/base/Binput.vue'
import BTextarea from '@/components/public-modules/cust-tab-content/business/base/Btextarea.vue'
import BRadio from '@/components/public-modules/cust-tab-content/business/base/Bradio.vue'
import BCheckbox from '@/components/public-modules/cust-tab-content/business/base/Bcheckbox.vue'
import BDatatime from '@/components/public-modules/cust-tab-content/business/base/Bdatatime.vue'
import BTime from '@/components/public-modules/cust-tab-content/business/base/Btime.vue'
import BSelect from '@/components/public-modules/cust-tab-content/business/base/Bselect.vue'
import BTree from '@/components/public-modules/cust-tab-content/business/base/Btree.vue'
import BFile from '@/components/public-modules/cust-tab-content/business/base/Bfile.vue'
import BNumber from '@/components/public-modules/cust-tab-content/business/base/Bnumber.vue'
export default {
  name: 'fields-layout',
  data() {
    return {
      stepFields: [] // 步骤字段
    }
  },
  props: {
    // 当前步骤信息
    currentStepInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  inject: ['busType'],
  computed: {
    allFields() {
      return this.$store.state.config.businessConfig[this.busType].allFields || {}
    }
  },
  components: {
    BInput,
    BTextarea,
    BRadio,
    BCheckbox,
    BDatatime,
    BSelect,
    BFile,
    BNumber,
    BTree,
    BTime
  },
  methods: {
    initData() {
      this.stepFields = []
      this.$nextTick(() => {
        let customerFields = deepClone(this.currentStepInfo.stepFields || [])
        let flowFields = this.allFields || []
        for (let i = 0; i < customerFields.length; i++) {
          let row = customerFields[i]
          for (let j = 0; j < row.cols.length; j++) {
            let col = row.cols[j]
            for (let k = 0; k < col.fields.length; k++) {
              let field = col.fields[k]
              let cacheField = getObjectById(flowFields, field._id)
              if (cacheField.type === 'dropdown' || cacheField.type === 'dropdownTree') {
                cacheField['default'] = [cacheField['default'], '', '']
              } else if (cacheField.type === 'checkbox') {
                cacheField['default'] = [cacheField['default']]
              }
              this.$set(col.fields, k, Object.assign({}, field, cacheField))
            }
          }
        }
        this.stepFields = customerFields
      })
    }
  },
  beforeMount() {}
}
</script>

<style scoped lang="stylus">
@import "../../../../../assets/common.styl"
.fields-layout
  position relative
.fields-layout__mask
  position absolute
  width 100%
  height 100%
  z-index 2
.fields-layout__empty
  text-align center
  padding 50px 0
  font-size 14px
  color $cf-gray5
</style>
